<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>PAYDEX® Score – powered by D&amp;B Direct</title>
    <script type="text/javascript" src="../../lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../lib/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="../../lib/knockout.mapping-2.4.1.js"></script>
    <script type="text/javascript" src="../../lib/bs3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../lib/bs3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="../../lib/select2-3.4.1/select2.js"></script>
    <link rel="stylesheet" href="../../lib/select2-3.4.1/select2.css" />
    <link rel="stylesheet" href="../../assets/css/main.css" />
<!--
    <script type="text/javascript" src="../../rest/token.php"></script>
-->
    <script type="text/javascript" src="../../dnbapi-2.0.0.js">{API_BASE:'../../rest/proxy.php/'}</script>
    <script type="text/javascript" src="../../lib/direct/demo.js"></script>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="http://dnb.com/favicon.ico" type="image/x-icon"/>
</head>
<body>
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <h2>D&amp;B Direct PAYDEX® Score Example</h2>
                <div class="well">
                    <div class="pull-right">
                        <i class="icon-signin" onclick="DNB.Demo.signin()"></i>
                    </div>
                    <form class="x-dnb-search">
                        <input type="text" data-bind="value: duns, dnb-type-ahead: 1" style="width:300px" />
                    </form>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-lg-8">
                        <div class="panel x-dnb-paydex" id="x-dnb-paydex">
            <div class="panel-heading">
                <h3 class="panel-title">D&amp;B PAYDEX®
                    <!-- ko if: paydex.loaded() -->
                    <!-- ko if: paydex.data().OrderProductResponse.OrderProductResponseDetail -->
                    <!-- ko with: paydex.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization -->
                        for
                        <!-- ko text: OrganizationName.OrganizationPrimaryName()[0].OrganizationName.$ -->
                        <!-- /ko -->
                    <!-- /ko -->
                    <!-- /ko -->
                    <!-- /ko -->
                </h3>
            </div>

            <!-- ko if: paydex.loading() -->
            <div class="panel-body">
                <div class="dnb-loading"></div>
            </div>
            <!-- /ko -->

            <!-- ko if: paydex.loaded() -->
            <ul class="nav nav-pills nav-justified" id="myTab">
                <li class="active"><a href="#home" data-toggle="pill">
                    <div class="dnb-badge-stack dnb-badge-stack-large">
                        <!-- ko if: paydex.data().OrderProductResponse.OrderProductResponseDetail -->
                        <!-- ko with: paydex.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization.BusinessTrading.Purchaser.CurrentPaydexScore -->
                        <div class="dnb-badge" data-bind="style: { color: DNB.Util.getGradientColor(ko.toJS(TwelveMonthsPaydex.PaydexScore), 0, 100) }"></div>
                        <div class="dnb-badge-label" data-bind="text: TwelveMonthsPaydex.PaydexScore, attr : { title : TwelveMonthsPaydex.PaydexScore } ">-</div>
                        <!-- /ko -->
                        <!-- /ko -->
                    </div>
                </a></li>
            </ul>
            <div class="panel-body">
                <div class="tab-content">
                  <div class="tab-pane active" id="home">
                    <!-- ko if: paydex.data().OrderProductResponse.OrderProductResponseDetail -->
                    <!-- ko with: paydex.data().OrderProductResponse.OrderProductResponseDetail.Product.Organization.BusinessTrading.Purchaser -->
                    <div class="dnb-risk-gradient">
                        <div class="dnb-risk-gradient-inner">
                        </div>
                        <div class="dnb-risk-gradient-badge-container" data-bind="{style:{left: CurrentPaydexScore.TwelveMonthsPaydex.PaydexScore() + '%'}}">
                            <div class="dnb-risk-gradient-badge">
                                <div class="dnb-risk-gradient-badge-label" data-bind="text: CurrentPaydexScore.TwelveMonthsPaydex.PaydexScore">
                                </div>
                            </div>
                        </div>
                    </div>
                    The D&amp;B PAYDEX is a unique, weighted indicator of payment performance based on payment experiences as reported to D&amp;B by trader references. Learn more about the D&amp;B PAYDEX.

                    <table class="table table-hover">
                        <tbody data-bind="foreach: DNB.Util.flatten(ko.toJS($data))">
                            <tr>
                                <td data-bind="text: friendlyName, style:{paddingLeft: (16 * indent) + 'px'}"></td>
                                <td data-bind="text: value"></td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- /ko -->
                    <!-- /ko -->
                  </div>
                </div>
            </div>
            <!-- /ko -->


    <!-- ko if: paydex.error() -->
    <!-- ko if: paydex.data().errors -->
    <div class="panel-body">
        <h3>Error</h3>
        <div data-bind="foreach: paydex.data().errors">
            <div class="alert alert-danger" data-bind="html: $data"></div>
        </div>
    </div>
    <!-- /ko -->
    <!-- /ko -->
</div>





<script type="text/javascript">
    function ViewModel(duns)
    {
        var self = this;
        self.duns = ko.observable(duns);
        self.paydex = DNB.Api.ko('V3.0/organizations/{duns}/products/PIAP_STD?CountryISOAlpha2Code=US&ApplicationTransactionId=automation', self);
    }

    function DriverViewModel(assessmentVm)
    {
        var self = this;
        self.duns = ko.observable('');
        ko.computed(function(){
            var duns = self.duns();
            if (duns)
                assessmentVm.duns(duns);
        });
    }

    var duns_number = 804735132;

    $(function(){
        var assessmentVm = new ViewModel(duns_number);
        ko.applyBindings(assessmentVm, $('#x-dnb-paydex')[0]);



        var vm = new DriverViewModel(assessmentVm);
        ko.applyBindings(vm, $('.x-dnb-search')[0]);
    });
</script>
            </div>
            <div class="col-lg-4">
                <h4>About The D&amp;B PAYDEX® Score</h4> <p> The D&amp;B PAYDEX® includes counts and display of summarized payment information provided by suppliers on each account between the supplier and purchasing company, along with derived views of all trade experiences in high credit ranges and by Supplier industry. </p>
<h4>Additional Resources</h4> <ul> <li><a href="http://developer.dnb.com/docs/2.0/tradedetail/3.0/current-risk">D&amp;B Direct 2.0 API Documentation</a></li> <li><a href="http://dnbdirect.github.io/">D&amp;B Direct 2.0 SDK</a></li> </ul>
            </div>
        </div>

    </div>


<div id="signinModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">D&amp;B Direct Microapp Sign-In</h4>
      </div>
      <div class="modal-body">

<form id="signin">
    <label>Username:</label><br/>
    <input type="text" name="username" /><br /><br />
    <label>Password:</label><br/>
    <input type="password" name="password" /><br /><br />
    <input type="submit" style="visibility:hidden" />
</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">$('#signinModal .btn-primary').click(function(){$('#signinModal form').submit()});</script>

    
</body>
</html>
